<template>
  <div class="llt-header"   :style="{
        background: navIsTo
          ? themeCurrentMenuItem.ColorBg
          : 'var(--navColorBg)',
      }">
    <div
      class="aic jcb top w100"
    
    >
      <!-- 一级导航左边 start -->
      <div class="w100">
        <!-- 菜单抽屉 start -->
        <template v-if="!navIsTo">
          <div class="hidden-md-and-down" >
            <el-icon @click="handleCollapse"
              v-show="!isCollapse"
              class="llt-icon-size"
              ><fold
            /></el-icon>
            <el-icon @click="handleCollapse"
              class="llt-icon-size"
              v-show="isCollapse"
              ><expand
            /></el-icon>
          </div>

          <div class="hidden-md-and-up1" @click="handleshowMenu">
            <el-icon class="llt-icon-size"
              ><operation
            /></el-icon>
          </div>
        </template>
        <template v-if="navIsTo">
          <div class="aic w100">
            <loginBox />
            <el-scrollbar
              :style="{
                backgroundColor: themeCurrentMenuItem.ColorBg,
              }"
              class="menuNavToAuto"
            >
              <div
                :style="{
                  width: sidebarRouters.length * 100 + 'px',
                }"
              >
                <el-menu
                  :collapse-transition="true"
                  mode="horizontal"
                  :default-active="menuActiveName"
                  :background-color="themeCurrentMenuItem.ColorBg"
                >
                  <SidebarItem
                    v-for="(route, index) in sidebarRouters"
                    :key="route.path + index"
                    :item="route"
                    :base-path="route.path"
                  ></SidebarItem>
                </el-menu>
              </div>
            </el-scrollbar>
          </div>
        </template>
      </div>
      <!-- 一级导航左边 end -->

      <!-- 二级导航左边 start -->
      <div class="aic">
        <div class="aic">
          <searchBox />
          <messageBox />
          <el-tooltip
            class="item"
            effect="dark"
            :content="!isFullscreen ? '全屏' : '退出全屏'"
            placement="bottom"
          >
            <el-icon
              :style="{
                color: navIsTo
                  ? 'var(--menuColorFont)'
                  : 'var(--navColorFont)',
              }"
              @click="toggle"
              v-if="!isFullscreen"
              class="llt-icon-size"
              ><full-screen
            /></el-icon>

            <el-icon
              :style="{
                color: navIsTo
                  ? 'var(--menuColorFont)'
                  : 'var(--navColorFont)',
              }"
              @click="toggle"
              v-else
              class="llt-icon-size"
              ><rank
            /></el-icon>
          </el-tooltip>
        </div>
        <userBox />
        <language />
        <!-- <el-tooltip
            class="item"
            effect="dark"
            :content="'退出系统'"
            placement="bottom"
          >
           

            <el-icon 
            :style="{
      color:'red'
     }"
              @click="toggle"
            
              class="llt-icon-size "><SwitchButton/></el-icon>
           
     
          </el-tooltip> -->
        <editBox />
      </div>
      <!-- 二级导航左边 end -->
    </div>
    <!-- 上下分割线 -->

    <div class="aic ">
      <div class="flex1">
      
        <LltTags
          @handleClose="handleClose"
          @handleOpen="handleOpen"
          :tagsData="tagPages"
        />
      </div>

      <div class="aic">
        <el-tooltip
          class="item"
          effect="dark"
          content="刷新页面"
          placement="bottom"
        >
          <el-icon @click="handleRefresh" class="llt-icon-size"
            ><refresh
          /></el-icon>
        </el-tooltip>
      </div>
    </div>

    <!-- 菜单导航 start -->
    <div class="llt-drawaer">
      <el-drawer
        direction="ltr"
        size="200"
        :with-header="false"
        v-model="showMenuBool"
      >
        <Menu />
      </el-drawer>
    </div>

    <!-- 菜单导航 start -->
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  watch,
  onMounted,
  computed,
  shallowRef,
  unref,
} from "vue";
import { useFullscreen } from "@vueuse/core";
import loginBox from "/@/layouts/components/logobox.vue";
import SidebarItem from "/@/layouts/components/Sidebar/SidebarItem.vue";
import LltTags from "/@/layouts/components/llt-tags.vue";
import Menu from "/@/layouts/components/menu.vue";
import type { AppRouteModule } from "/@ts/router/types";
import { useRouter, useRoute } from "vue-router";
import { ElLoading } from "element-plus";
import messageBox from "/@/layouts/components/messageBox.vue";
import searchBox from "/@/layouts/components/searchBox.vue";
import userBox from "/@/layouts/components/userBox.vue";
import language from "/@/layouts/components/language.vue";
import editBox from "/@/layouts/components/editBox.vue";
import { routerPush } from "/@ts/hooks/route";
import { getLocalStorage } from "/@ts/hooks/storage";
import {
useIndexStore
} from '/@ts/store';
import { usePermissionStore } from "/@ts/store/modules/permission";
const router = useRouter();
const store = useIndexStore();
const navIsTo = computed(() => store.getNavIsTo);
const menuActiveName = computed(() => store.getMenuActiveName);
const themeCurrentMenuItem = computed(() => store.getThemeCurrentMenuItem);
const tagPages = computed(() => store.getTagPages);
const    permissionStore = usePermissionStore();
const route = useRoute();
const levelList = ref([]);
const { isFullscreen, toggle } = useFullscreen();
watch(
  () => route,
  (val: any) => {
    const { name } = val;
    if (!name) return;
    store.setMenuActiveName( val.path); //激活菜单
    store.setTagPages({...val}); //更新tab标签页
  },
  {
    deep: true,
    immediate: true,
  },
);
const isDashboard = (route: any) => {
  const name = route && route.name;
  if (!name) {
    return false;
  }
  return name.trim() === "dashboardWorkbench";
};
const handleLink = (data: any, index: Number) => {
  if (index == 0) {
    routerPush(data);
  }
};
const getBreadcrumb = () => {
  let matched: any = route.matched.filter(
    (item) => item.meta && item.meta.title,
  );
  const first = matched[0];
  if (!isDashboard(first)) {
    matched = [{ path: "/workbench", meta: { title: "工作台" } }].concat(
      matched,
    );
  }
  levelList.value = matched.filter(
    (item: any) =>
      item.meta && item.meta.title && item.meta.breadcrumb !== false,
  );
};
watch(
  () => route,
  (val: any) => {
    if (val.path.startsWith("/redirect/")) {
      return;
    }
    getBreadcrumb();
  },
  {
    deep: true,
    immediate: true,
  },
);
const internalInstance = getCurrentInstance(); //获取当前实例
const globalProperties = internalInstance?.appContext.config.globalProperties;
const emit = defineEmits(["handleCollapse"]);
interface HeaderColors {
  [key: string]: string;
}
interface StateHeader {
  userInfo: Object;
  levelList: [];
}
const state: StateHeader = reactive({
  levelList: [],
  userInfo: {},
});
const sidebarRouters = computed(() => {
  return permissionStore.getSidebarRouters
});
const props = defineProps({
  isCollapse: {
    type: Boolean,
    required: false,
  },
});
 
let showMenuBool = shallowRef(false);
onMounted(() => {
  // getUserInfo();
});
const getUserInfo = () => {
  let data: string = getLocalStorage(
    import.meta.env.VITE_USER_INFO_KEY as string,
  ) as string;
  state.userInfo = data
};

/**
 * 打开菜单 低于 md显示
 */
const handleshowMenu = () => {
  showMenuBool.value = true;
};

 
const handleRefresh = () => {
  store.setRefresh();
};
 
const handleCollapse = () => {
  emit("handleCollapse", props.isCollapse);
};
const handleClose = (e: number) => {
  store.setCloseTagPages( e);
};
interface LltTags {
  index: number;
  routerItem: AppRouteModule;
}
const handleOpen = (e: LltTags) => {
  /**
   * 1. 获取数据 对比是否是当前激活 标签
   * 2. 如果是激活就不处理 不是激活标签就处理激活内容
   */
  store.setMenuActiveName(e.routerItem.name);
  routerPush(e.routerItem);
};
</script>

<style lang="scss">
.llt-drawaer .el-drawer > .el-drawer__body {
  padding: 0;
}
.header-setting-drawer {
  border-top: 1px solid #e6e6e6;
  padding: 10px 30px;
}

.header-message-tabs .el-tabs__active-bar {
  width: 44px !important;
}

.llt-header {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  .top {
    // position: relative;
    // z-index: 10000;
    // z-index: 3;
    border-top: solid 1px rgba(0, 0, 0, 0.1); //#e6e6e6
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    height: 54px;
  }
  .bottom {
    box-sizing: border-box;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  }
}

.llt-badge {
  position: absolute;
  top: 10%;
  right: 11%;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: red;
}
.header-message-tabs {
  padding-top: 0;
  width: 400px;

  .item {
    color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 14px;
    line-height: 2rem;
  }
  .time {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    line-height: 2rem;
  }
}
.header-theme-color-item {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  color: #fff;
  margin-left: 10px;
}
#el-popper-3198 {
  z-index: 1000012 !important;
}
</style>
